<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.1.1.js" ></script>
		<style>
			.int{
				position: relative;
				width: 100%;
				height:800px;
				left: 0%;
				background: #FF0000;
				text-align: center;
			}
			.user {
				position: absolute;
				width: 80%;
				background: #E7E7E7;
				left: 10%;
				top: 7%;
				
			}
			.pass {
				position: absolute;
				width: 80%;
				background: #E7E7E7;
				left: 10%;
				top:11%;
				
			}
			.pass_c {
				position: absolute;
				width: 80%;
				background: #E7E7E7;
				left: 10%;
				top: 15%;
				
			}
			.email {
				position: absolute;
				width: 80%;
				background: #E7E7E7;
				left: 10%;				
				top: 19%;
			}
			.mag{
				position: absolute;
				width: 80%;
				background: #E7E7E7;
				left: 10%;				
				top: 25%;
			}
			.mag label{
				position:absolute;
				top:0%;
				left: 28%;
			}
			.mag textarea{
				position: relative;
				top: 2px;
    			height: 203px;
    			left: 2rem;
    			width: 172px;
			}
			.user_txt{
				left: 75%;
				position: absolute;
			}
			.email_txt{
				left: 75%;
				position: absolute;
			}
			.pass_txt{
				left: 75%;
				position: absolute;
			}
			.onError{
				    background:#FFE0E9 url(img/reg3.gif) no-repeat 0 center;
				}
			.onSuccess{
				    background:#E9FBEB url(img/reg4.gif) no-repeat 0 center;
				}
			table{ border:0;border-collapse:collapse;}
			td{ font:normal 12px/17px Arial;padding:2px;width:100px;}
			th{ font:bold 12px/17px Arial;text-align:center;padding:4px;border-bottom:1px solid #333;}
			.even{ background:#FFF38F;}  /* 偶数行样式*/
			.odd{ background:#FFFFEE;}  /* 奇数行样式*/
			.selected{ background:#FF6500;color:#fff;}
			.ta{
				position: absolute;
				top:56%;
				left:20%;
			}
			.sub{
				position: relative;
				
			}
			.ta{
				position: absolute;
				
			}
		</style>
	</head>
	<body>
			<div class="int">
				<div class="user">
					<form>
					<label for="username1" style=" position:relative;right:0.5rem;">用户名</label>
					<input type="text" id="username1" class="required" onfocus="ocheckusername()" style="position: relative; right:-0.5rem ;"/>
					<span class="user_txt"></span>
				</div>
			    <div class="pass">
					<label for="pass1">密码</label>
					<input type="password" id="pass1" class="required" onfocus="ocheckpass()" style="position: relative; right:-1rem ;" />
					<span class="pass_txt"></span>
				</div>
				<div class="pass_c">
					<label for="pass2" style=" position:relative;right:1rem;">确认密码</label>
					<input type="password" id="pass2" onfocus="ocheckpass()" class="required" />
					<span class="pass_txt"></span>
				</div>
				<div class="email">
					<label for="email">邮箱</label>
					<input type="text" id="email" class="required"  onfocus="ocheckemail()" style="position: relative; right:-1rem ;" />
					<span class="email_txt"></span>
				</div>
				
				<div class="mag">
					<label for="mag" style=" position:absolute;">详细信息</label>
					<textarea id="mag"></textarea>
				</div>
					<div class="ta">
		<table>
			<thead>
			<tr id="see1"><th></th><th>姓名</th><th>性别</th><th>暂住地</th></tr>
			</thead>
			<tbody>
			<tr id="see"><td>匹配</td><td></td><td><input type="text"placeholder="请输入匹配字段" id="filterName"></td><td><input type="button" value="查找" onclick="see()"</td></tr>
			
			<tr class="father" id="row_01"><td colspan="4">前台设计组</td></tr>
			<tr class="child_row_01"><td><input type="checkbox" name="table"/></td><td>张三</td><td>男</td><td>浙江宁波</td></tr>
			<tr class="child_row_01"><td><input type="checkbox" name="table"/></td><td>李四</td><td>男</td><td>浙江宁波</td></tr>
			<tr class="father" id="row_02"><td colspan="4">前台开发组</td></tr>
			<tr class="child_row_02"><td><input type="checkbox" name="table"/></td><td>王武</td><td>女</td><td>湖南长沙</td></tr>
			<tr class="child_row_02"><td><input type="checkbox" name="table"/></td><td>赵六</td><td>男</td><td>浙江宁波</td></tr>
			<tr class="father" id="row_03"><td colspan="4">后台开发组</td></tr>
			<tr class="child_row_03"><td><input type="checkbox" name="table"/></td><td>rain</td><td>女</td><td>浙江温州</td></tr>
			<tr class="child_row_03"><td><input type="checkbox" name="table"/></td><td>nana</td><td>女</td><td>浙江宁波</td></tr>
			</tbody>
		</table>
		<div class="sub">
					<input type="submit" value="提交" id="send" onclick="sub()"/>&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" id="res" />
				</div>
		</div>
				</div>
				
				
			</form>
			
		
		</div>
		

		<script>
			$('tr.father').click(function(){
				$(this)
//				.toggleClass("selected")
				.siblings('.child_'+this.id).toggle();
				
			})
		  function see(){
			$("#filterName").keyup(function(){
				$("table tbody tr").hide()
				.filter(":contains('"+($(this).val())+"')").show();
				$("#see").show();
				$("see1").show();
				
			}).keyup();
			
		}
		
			$('tbody>tr').click(function(){
				if($(this).hasClass('selected'))
				{
					$(this)
					.removeClass('selected')
					.find(':checkbox').attr('checked',false)
				}
				else{
					$(this)
						.addClass('selected')
						.find(':checkbox').attr('checked',true)
					
				}
				
			})
//			$('tbody>tr').click(function(){
//				$(this).addClass('selected')
//				.siblings().removeClass('selected')
//				.end()
//				
//			})
			$(function(){
				$('tbody>tr:odd').addClass('odd');
				$('tbody>tr:even').addClass('even');
			})
			function ocheckemail(){ 
    var email = document.getElementById('email').value;
     if(!(/^1(3|4|5|7|8)\d{9}$/.test(email))){ 
    $(".email_txt").html("");  
    }
     return;
    }

function ocheckusername(){ 
    var user = document.getElementById('username1').value;
     if(!(/^[\u4e00-\u9fa5]+$/.test(user))){ 
     	
       $(".user_txt").html(""); 
    } 
    return;
   }
function ocheckpass(){ 
	var pass1 = document.getElementById('pass1').value;
    var pass = document.getElementById('pass2').value;
    if(pass1!=pass){ 
     	
       $(".pass_txt").html(""); 
    } 
    return;
   }

		
$('#username1').blur(function(){
    var user = document.getElementById('username1').value;
    var c ="*  输入错误"
     if(!(/^[\u4e00-\u9fa5]+$/.test(user))){ 
     	
       $(".user_txt").html(c);  
        return false; 
    } 
     else
     return true;
 } )

$('#pass2').blur(function(){
	var pass1 = document.getElementById('pass1').value;
    var pass = document.getElementById('pass2').value;
     if(pass1!=pass){ 
    $(".pass_txt").html("两次密码输入不一致");  
        return false; 
    }
     else
     return true;
       
   })
 $('#pass1').blur(function(){
	var pass1 = document.getElementById('pass1').value;
    var pass = document.getElementById('pass2').value;
     if(pass1!=pass){ 
    $(".pass_txt").html("两次密码输入不一致");  
        return false; 
    }
     else
     return true;
       
   })

$('#email').blur(function(){
    var email = document.getElementById('email').value;
     if(!(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/.test(email))){ 
    $(".email_txt").html("格式错误，请重填");  
        return false; 
    }
     else
     return true;
       
   })
   function sub(){
   	
   }
   $("#res").click(function(){
   	 location.reload();
   	
   })
		</script>
	</body>
</html>
